<script lang="ts" setup>
const { proxy }: any = getCurrentInstance();
import bar from './components/bar.vue'
// import moment from 'moment'
const screenBox = ref<HTMLImageElement>()
let time = ref(proxy.$moment().format('YYYY-MM-DD hh:mm:ss'))
let timer = ref(0)
timer.value = setInterval(()=>{
  time.value = proxy.$moment().format('YYYY-MM-DD hh:mm:ss')
  // time.value = moment().format('YYYY-MM-DD hh:mm:ss')
},1000)
onMounted(() => {
  // const box = <HTMLImageElement>document.querySelector('.screen-box')
  // box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  screenBox.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  function getScale(w = 1920, h = 1080) {
    //设备的宽高/设计稿的宽高
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh
  }
  window.onresize=()=>{
    // box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    screenBox.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
})
onUnmounted(()=>{
  clearInterval(timer.value)
})
</script>

<template>
  <div class="screen-container">
    <div class="screen-box" ref="screenBox">
      {{ time }}
      <bar></bar>
    </div>
  </div>
</template>

<style lang="scss">
.screen-container {
  width: 100vw;
  height: 100vh;
  background:#ddd url() no-repeat;
  background-size: cover;
  .screen-box {
    position: fixed;
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    left: 50%;
    top: 50%;
    background: cyan;
  }
}
</style>
